<template>
  <div>
<h2>显示页面</h2>
  </div>
  会员姓名
  <input type="text" v-model="state.name">
  会员联系方式
  <input type="text" v-model="state.phone">
  会员身份证号
  <input type="text" v-model="state.card">
  会员卡号
  <input type="text" v-model="state.number">
  <input type="button" value="查询" @click="show()">
  <table border="1">
    <tr>
      <td>会员姓名</td>
      <td>会员卡号</td>
      <td>联系方式</td>
      <td>生日</td>
      <td>民族</td>
      <td>消费金额</td>
      <td>身份证号码</td>
      <td>注册时间</td>
      <td>性别</td>
      <td>城市</td>
      <td>会员类型</td>
      <td>会员等级</td>
    </tr>
    <tr v-for="item in list">
      <td>{{ item.name }}</td>
      <td>{{ item. number}}</td>
      <td>{{ item.phone }}</td>
      <td>{{ item. sdate}}</td>
      <td>{{ item.minzu }}</td>
      <td>{{ item.price }}</td>
      <td>{{ item.card }}</td>
      <td>{{ item. dDate}}</td>
      <td>{{ item. sex}}</td>
      <td>{{ item. city}}</td>
      <td>{{ item. type}}</td>
      <td>{{ item. dengji}}</td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import axios from 'axios';
import{reactive,toRefs,onMounted} from'vue'
import { useRoute,useRouter  } from 'vue-router';
let route=useRoute();
let router=useRouter();
let data:any=reactive({
  state:{
    name:'',
    phone:'',
    card:'',
    number:'',
  },
  list:[]
})
let{state,list}=toRefs(data)
onMounted(()=>{
  show()
})

const show=()=>{
  let obj=
  {
  name:state.value.name,
  phone:state.value.phone,
  card:state.value.card,
  number:state.value.number
  }
  console.log(obj)
  axios({
    url:'/api/Member/GetAll',
    method:'get',
    params:obj
  })
 
  .then(res=>{
    list.value=res.data.data
    console.log(list.value=res.data.data)
  })
  
  .catch(err=>{

  })
}
</script>

<style scoped>

</style>